import { View } from '@tarojs/components';
import getSystemInfo from 'utils/getSystemInfo';

export interface PlaceHolderProps {
  /**
   * statusBar: only include status area
   * screenBottom: 屏幕下方指示条区域
   * tabbar: only include tabbar
   * navigationBar: only nav bar
   * wholeTabbar: inclue tabbar and screenBottom
   * wholeNavigationBar: inclue status and navigationBar
   */
  type?: 'statusBar' | 'screenBottom' | 'tabbar' | 'wholeTabbar' | 'navigationBar' | 'wholeNavigationBar' | 'number',
  height?: number
}

function ScreenBottomPlaceholder({type = 'number', height = 0}: PlaceHolderProps) {
  const info = getSystemInfo()
  let _height = height

  if (type == 'statusBar') {
    _height = info.statusBarHeight || 16
  }
  if (type == 'screenBottom') {
    _height = (info.placeHolderHeight || 0) / 2
  }
  if (type == 'tabbar') {
    _height = info.tabbarHeight || 0
  }
  if (type == 'wholeTabbar') {
    _height = (info.tabbarHeight || 0) + (info.placeHolderHeight || 0) / 2
  }
  if (type == 'navigationBar') {
    _height = info.navBarHeight || 0
  }
  if (type === 'wholeNavigationBar') {
    _height = (info.navBarHeight || 0) + (info.statusBarHeight || 0)
  }

  return (
    <View style={{height: _height, background: 'transparent'}} />
  )
}

export default ScreenBottomPlaceholder;
